<template>
	<view class="examine">
		<template v-if="list.length ===0">
			<view>
				<notFoundData />
			</view>
		</template>
		<template v-else>
			<template v-for="(item,index) in list">
				<view class="clockItem" :key="item.worker_id">
					<uni-collapse ref="collapse">
						<uni-collapse-item>
							<template v-slot:title>
								<view class="card">
									<view class="header">
										<view class="name">{{item.user_name}}</view>
										<view class="day">{{item.type}}</view>
									</view>
									<view class="body">
										<view class="left">
											{{item.date}}

										</view>

									</view>
								</view>
							</template>
							<uni-section title="项目" :sub-title="item.project_name"></uni-section>
							<template>
								<view>
									<uni-section title="平方米" :sub-title="item.square_meter"></uni-section>
								</view>
								<view>
									<uni-section title="工时" :sub-title="item.days"></uni-section>
								</view>
								<uni-section title="操作"></uni-section>
								<template v-if="item.admin_approved===0">
									<view class="right">
										<view class="rightBox">
											<button size="mini" @click="pass(item,index)"
												style="background-color: #007aff;" class="button"
												type="primary">审核</button>
										</view>
										<view class="rightBox">
											<button size="mini" @click="reject(item,index)" class="button"
												type="warn">反驳</button>
										</view>
										<view class="rightBox">
											<button size="mini" @click="modify(item,index)" class="button"
												type="default">修改</button>
										</view>
									</view>
								</template>
								<template v-else>
									<view class="tag-view" v-if="item.admin_approved===1">
										<uni-tag text="已审核" type="primary" />
									</view>
									<view class="tag-view" v-if="item.admin_approved===3">
										<uni-tag text="已驳回" type="error" />
									</view>

								</template>

							</template>

						</uni-collapse-item>
					</uni-collapse>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import notFoundData from '@/components/notFoundData/index.vue'
	export default {
		props: {
			auditList: {
				type: Array,
				default () {
					return []
				}
			}

		},
		data() {
			return {
				currentItem: null,
				list: [],
				index: null
			}
		},
		components: {
			notFoundData
		},

		methods: {
			async passWorker(item, index) {
				try {
					const data = {
						location: item.location,
						project_id: item.project_id,
						type: item.type,
						id: item.id,
						days: item.days,
						square_meter: item.square_meter,
						admin_approved: 1
					}
					if (!data.days && data.days !== 0) {
						//0 or ''
						delete data.days
					}
					if (!data.square_meter && data.square_meter !== 0) {
						delete data.square_meter
					}
					const result = await this.$request.request({
						url: this.$api.auditWorker,
						data: JSON.stringify(data),
						header: this.$aplsjsonheader,
						isToast: true,
					});
					const itemdata = {
						...this.list[index],
						admin_approved: 1
					}
					this.$set(this.list, index, itemdata)

				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			},
			async rejectWorker(item, index) {
				try {
					const data = {
						...item,
						admin_approved: 3
					}
					if (!data.days) {
						//0 ''
						delete data.days
					}
					if (!data.square_meter) {
						delete data.square_meter
					}
					const result = await this.$request.request({
						url: this.$api.auditWorker,
						data: JSON.stringify(data),
						header: this.$aplsjsonheader,
						isToast: true,
					});
					const itemData = {
						...this.list[index],
						admin_approved: 3
					}
					this.$set(this.list, index, itemData)

				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			},
			modify(item, index) {
				this.handleClick(item, index)
			},
			pass(item, index) {
				console.log(item, 138);
				uni.showModal({
					cancelColor: "red",
					cancelText: "取消",
					confirmText: "确定",
					title: "提示",
					content: "请确认",
					success: async (res) => {
						if (res.confirm) {
							this.passWorker(item, index)

						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			reject(item, index) {
				uni.showModal({
					cancelColor: "red",
					cancelText: "取消",
					confirmText: "确定",
					title: "提示",
					content: "请确认反驳",
					success: async (res) => {
						if (res.confirm) {
							this.rejectWorker(item, index)

						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			handleClick(item, index) {
				this.currentItem = item
				this.index = index
				this.$nextTick(() => {
					uni.navigateTo({
						url: "/pages/record/admin/examin_detail",
					});
				})
			},
			competionMsgSend() {
				this.$eventBus.$emit('examin_detail_ready', this.currentItem, this.index)
				this.currentItem = null
				this.index = null
			}
		},
		watch: {
			auditList: {
				handler(newValue, oldValue) {
					this.list = newValue
				},
				deep: true // 深度监听父组件传过来对象变化
			},


		},
		created() {
			this.$eventBus.$on('examine', () => {
				this.competionMsgSend()
			})
			this.list = this.auditList
		}
	}
</script>

<style lang="less" scoped>
	.examine {
		background-color: #fdfdfd;
		height: auto;
		min-height: 100%;
		padding-bottom: 20rpx;

		.clockItem {
			padding: 25rpx 35rpx;
		}

		.right {
			display: flex;
			padding: 0 25rpx;

			.rightBox {
				flex: 1;
				margin: 0 10rpx;
			}

		}

		.card {
			padding: 10rpx 20rpx;

			.header {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.day {
					font-size: 25rpx;
					color: #929499;
				}

				.name {
					font-size: 35rpx;
					font-weight: 500;
					color: #3d3d43;
				}
			}

			.body {
				color: #929499;
				font-size: 25rpx;
				display: flex;
				justify-content: space-between;


			}
		}
	}
</style>
